<template>
	<div class='app-container'>
		<el-form class="filter-container" label-position="left" label-width="68px">
			<el-row :gutter="24">
				<el-col :span="4">
					<el-form-item label="专题名称" style="margin-bottom: 0!important;">
						<el-input @keyup.enter.native="getList" class="filter-item" placeholder="请输入名称" v-model.trim="listQuery.seminarName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="审核状态" style="margin-bottom: 0!important;">
						<el-select clearable v-model="listQuery.auditStatus" placeholder="请选择">
							<el-option value="" label="全部"></el-option>
							<el-option value="0" label="未审核"></el-option>
							<el-option value="1" label="已审核"></el-option>
							<el-option value="2" label="已驳回"></el-option>
							<el-option value="3" label="已部分审核"></el-option>
							<el-option value="4" label="已部分驳回"></el-option>
							<el-option value="5" label="已下线"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="更新时间" style="margin-bottom: 0!important;">
						<el-date-picker type="datetimerange" :default-time="['00:00:00', '23:59:59']" @keyup.enter.native="getList" class="filter-item" align="right" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" v-model="time" :picker-options="pickerOptions">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">{{$t('table.search')}}</el-button>
				<el-button :loading="refreshing" class="filter-item el-icon-refresh" style="margin-left: 10px;" @click="refreshList" type="primary">&nbsp;刷新列表</el-button>
				<!--<el-button class="filter-item" @click="handleShow(true)" type="danger">下线</el-button>-->
			</el-row>
		</el-form>
		<el-table stripe :data="tableData" v-loading="listLoading" element-loading-text="加载中..." border fit highlight-current-row style="width: 100%">
			<el-table-column align="center" label="专题名称" min-width="150">
				<template slot-scope="scope">
					<el-button class="preview-button" type="text" @click="handleShow(scope.row, 'show')">{{scope.row.seminarName}}</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" align="center" width="160"></el-table-column>
			<el-table-column prop="updateTime" label="更新时间" align="center" width="160"></el-table-column>
			<el-table-column align="center" label="审核状态" min-width="80">
				<template slot-scope="scope">
					<el-tag size="small" :type="checkClass(scope.row.auditStatus)">{{checkStatu(scope.row.auditStatus)}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="updater" label="审核人" align="center"></el-table-column>
			<el-table-column prop="creater" label="发布人" align="center"></el-table-column>
			<el-table-column prop="adjustDesc" label="驳回原因" align="center" min-width="200" show-overflow-tooltip></el-table-column>
			<el-table-column prop="topTime" label="置顶时间" align="center" width="100"></el-table-column>
			<el-table-column label="操作" align="center" width="270">
				<template slot-scope="scope">
					<el-button size="mini" v-if="scope.row.creater == $store.state.user.userCode" @click="handleShow(scope.row, 'show')">查看专题</el-button>
					<el-button size="mini" v-else @click="handleShow(scope.row, 'update')" :disabled="scope.row.auditStatus == 1 || scope.row.auditStatus == 2 || scope.row.auditStatus == 4 || scope.row.auditStatus == 5">审核专题</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.row)" :disabled="scope.row.auditStatus == 0 || scope.row.auditStatus == 2 || scope.row.auditStatus == 5">下线</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination-container">
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-sizes="[10,20,30,50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
		</div>
		<el-dialog :fullscreen='true' :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
			<el-form ref="temp" :model="temp" label-position="left" label-width="80px" style='margin: auto; max-width: 1200px'>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="专题名称" prop="seminarName">
							<el-input v-model.trim="temp.seminarName" type="text" placeholder="请输入" disabled :maxlength='50'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="专题类型" prop="type">
							<el-select v-model="temp.type" placeholder="请选择" disabled>
								<el-option label="人工专题" :value='0'></el-option>
								<!-- <el-option label="智能专题" :value='1'></el-option> -->
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="置顶时间" prop="topTime">
							<el-date-picker v-model="temp.topTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" disabled></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="专题描述" prop="descript">
							<el-input v-model="temp.descript" type="textarea" :rows="3" :maxlength='200' placeholder="请输入" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="专题资讯" prop="news">
							<el-table v-loading="tagLoading" element-loading-text="加载中..." stripe max-height="500" :data="temp.news" style="width: 100%" border fit highlight-current-row>
								<el-table-column label="资讯标题" align="center" min-width="150">
									<template slot-scope="scope">
										<el-button class="preview-button" type="text" @click="showInfo(scope.row)">{{ scope.row.title }}</el-button>
									</template>
								</el-table-column>
								<el-table-column prop="summary" label="资讯摘要" align="center" show-overflow-tooltip min-width="150"></el-table-column>
								<el-table-column prop="update_time" label="更新时间" align="center" width="100"></el-table-column>
								<el-table-column align="center" label="资讯状态" min-width="80">
									<template slot-scope="scope">
										<el-tag size="small" :type="checkNews(scope.row.news_status)">{{checkNewsStatu(scope.row.news_status)}}</el-tag>
									</template>
								</el-table-column>
								<el-table-column prop="is_original" label="资讯类型" align="center">
									<template slot-scope="scope">
										<span v-if="scope.row.is_original == 0">原创资讯</span>
										<span v-else-if="scope.row.is_original == 1">智能资讯</span>
										<span v-else>机器写稿</span>
									</template>
								</el-table-column>
								<!--<el-table-column label="操作" align="center" width="150" v-if="dialogStatus !== 'show'" key="2">
									<template slot-scope="scope">
										<el-button size="mini" type="danger" @click="deleteRow(scope.$index, temp.news)">删除</el-button>
									</template>
								</el-table-column>-->
							</el-table>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="专题配图" prop="picUrl">
							<img :src="temp.picUrl" class="avatar">
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="auditMethod()" v-if="dialogStatus !== 'show'">审核通过</el-button>
				<el-button type="warning" @click="visible = true" v-if="dialogStatus !== 'show'">驳回</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
			</div>
			<el-dialog append-to-body :fullscreen='true' :title="infoTitle" :visible.sync="dialogInfo">
				<div v-if='dialogInfo'>
					<component :is="currentView" :infoMsg='infoMsg' @closeFile='closeFile'></component>
				</div>
			</el-dialog>
			<el-dialog append-to-body title="驳回专题" :visible.sync="visible" width="30%" :close-on-click-modal=false>
		  		<el-form :model="temp" label-width="80px" class="demo-ruleForm">
		  		  	<el-form-item label="驳回原因" prop="adjustDesc">
					    <el-input type="textarea" v-model.trim="temp.adjustDesc"></el-input>
				  	</el-form-item>
			  	</el-form>
			  	<span slot="footer" class="dialog-footer">
				    <el-button @click="visible = false">取 消</el-button>
				    <el-button type="primary" @click="goback()">确 定</el-button>
			  	</span>
			</el-dialog>
		</el-dialog>
	</div>
</template>

<script>
	import { getPageListAll, getEdit, backMethod, passMethod, downMethod } from '@/api/project'
	import pinyin from 'pinyin'
	import intellPreview from './intellPreview'
	import origPreview from './origPreview'
	import roboPreview from './roboPreview'

	export default {
		name: 'projectList',
		components: {
			intellPreview,
			origPreview,
			roboPreview
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				this.listLoading = true
				if(this.time) {
					this.listQuery.startTime = this.time[0]
					this.listQuery.endTime = this.time[1]
				} else {
					this.listQuery.startTime = ''
					this.listQuery.endTime = ''
				}
				getPageListAll(this.listQuery).then(res => {
					this.tableData = res.Data
					this.total = res.total * 1
					this.listLoading = false
				})
			},
			handleSizeChange(val) {
				this.listQuery.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val
				this.getList()
			},
			handleShow(row, str) {
				this.tagLoading = true
				getEdit({ 'id': row.id }).then(res => {
					let val = res.Data[0]
					this.temp = Object.assign({}, val)
					this.dialogStatus = str
					this.tagLoading = false
					this.dialogFormVisible = true
					this.$nextTick(() => {
						this.$refs['temp'].clearValidate()
					})
				})
			},
			handleDelete(rows) {
				this.$confirm('确认下线, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					downMethod({'id': rows.id}).then(res => {
						this.getList()
						this.$notify({ title: '成功', message: '已下线', type: 'success', duration: 5000 })
					})
				}).catch(() => {
					this.$message({ type: 'info', message: '已取消下线' })
				})
			},
			refreshList() {
				this.refreshing = true
				const params = Object.assign({}, this.listQuery)
				if(this.listQuery.updateTime) {
					params.startUpdateTime = this.listQuery.updateTime[0]
					params.endUpdateTime = this.listQuery.updateTime[1]
				} else {
					params.startUpdateTime = ''
					params.endUpdateTime = ''
				}
				getPageListAll(params).then(res => {
					this.refreshing = false
					this.tableData = res.Data
					this.total = parseInt(res.total)
					this.$message({
						message: '刷新成功',
						type: 'success'
					})
				}).catch(() => {
					this.refreshing = false
				})
			},
			checkNews(sta) {
				switch(sta) {
					case 0:
						return '' // '待处理'
					case 1:
						return 'success' // '审核'
					case 2:
						return 'danger' // 2：驳回
				}
			},
			checkNewsStatu(data) {
				switch(data) {
					case 0:
						return '待处理'
					case 1:
						return '已通过'
					case 2:
						return '未通过'
				}
			},
			checkClass(data) {
				switch(data) {
					case 0:
						return '' // '未审核'
					case 1:
						return 'success' // '已审核'
					case 2:
						return 'danger'
					case 3:
						return 'warning'
					case 4:
						return 'warning'
					case 5:
						return 'danger'
				}
			},
			checkStatu(data) {
				switch(data) {
					case 0:
						return '未审核'
					case 1:
						return '已审核'
					case 2:
						return '已驳回'
					case 3:
						return '已部分审核'
					case 4:
						return '已部分驳回'
					case 5:
						return '已下线'
				}
			},
			showInfo(row) {
				this.infoMsg = Object.assign({}, row)
				if(row.is_original == 0){
					this.currentView = 'origPreview'
					this.infoTitle = '原创资讯详情'
				}else if(row.is_original == 1){
					this.currentView = 'intellPreview'
					this.infoTitle = '智能资讯详情'
				}else if(row.is_original == 2){
					this.currentView = 'roboPreview'
					this.infoTitle = '机器写稿详情'
				}
				this.dialogInfo = true
			},
			closeFile() {
				this.dialogInfo = false
			},
			goback() {
				let obj = {
					'id': this.temp.id,
					"adjustDesc": this.temp.adjustDesc || ''
				}
				backMethod(obj).then(res => {
					this.visible = false
					this.dialogFormVisible = false
					this.getList()
					this.$notify({ title: '成功', message: '已驳回', type: 'success', duration: 5000 })
				})
			},
			auditMethod() {
				passMethod({'id': this.temp.id}).then(res => {
					this.dialogFormVisible = false
					this.getList()
					this.$notify({ title: '成功', message: '审核成功', type: 'success', duration: 5000 })
				})
			}
		},
		data() {
			return {
				refreshing: false,
				dialogFormVisible: false,
				total: null,
				listLoading: false,
				currentView: 'intellPreview',
				time: ['', ''],
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					auditStatus: '',
					seminarName: '',
					startTime: '',
					endTime: ''
				},
				infoTitle: '',
				dialogInfo: false,
				infoMsg: {},
				tableData: [],
				temp: {
					id: '',
					descript: '',
					news: [],
					picUrl: '',
					seminarName: '',
					topTime: '',
					type: 0,
					adjustDesc: ''
				},
				tagLoading: false,
				textMap: {
					show: '专题详情',
					update: '审核专题'
				},
				dialogStatus: '',
				visible: false,
				pickerOptions: {
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							const end = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime() -
								1000
							const start = end + 1000 - 3600 * 1000 * 24
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近三天',
						onClick(picker) {
							const end = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime() -
								1000
							const start = end + 1000 - 3600 * 1000 * 24 * 3
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近一周',
						onClick(picker) {
							const end = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime() -
								1000
							const start = end + 1000 - 3600 * 1000 * 24 * 7
							picker.$emit('pick', [start, end])
						}
					}]
				}
			}
		}
	}
</script>
<style>
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>